<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红猫DPS_v2.3.51</title>
    <link rel="stylesheet" href="overlay.css">
</head>
<body>
    <!-- 标题栏 -->
    <div id="titleBar" class="title-bar">
        <div id="battleDurationToast" class="duration-toast hidden">
            <span id="battleDurationText">战斗时长 0:00</span>
        </div>


        <div class="controls">
            <div class="control-dropdown collapsible">
                <button id="combatBtn" class="control-btn dropdown-btn combat-btn" title="战斗">
                    <img src="../public/战斗力.png" alt="战斗" class="btn-icon">
                </button>
                <div id="combatMenu" class="dropdown-menu">
                    <div class="dropdown-section">
                        <div class="dropdown-header dropdown-option"  id="combatClearOption">清空当前数据</div>
                        <div class="dropdown-header dropdown-option "  id="allBtn" tittle="查看全部玩家">查看全部玩家数据</div>
                        <div class="dropdown-header dropdown-option "  id="allBtn" tittle="查看历史战斗记录">查看历史战斗记录</div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-section">
                        <div class="dropdown-header">计时</div>
                        <div class="dropdown-options">
                            <label class="dropdown-option"><span data-seconds="60" class="combat-timer-option">60秒</span></label>
                            <label class="dropdown-option"><span data-seconds="180" class="combat-timer-option">180秒</span></label>
                            <label class="dropdown-option"><span data-seconds="300" class="combat-timer-option">300秒</span></label>
                        </div>
                    </div>
                </div>
            </div>
         
            <div class="control-dropdown collapsible">
                <button id="controlBtn" class="control-btn dropdown-btn filter-btn" title="筛选">
                    <img src="../public/筛选.png" alt="筛选" class="btn-icon">
                </button>
                <div id="controlMenu" class="dropdown-menu">
                    <div class="dropdown-section">
                        <div class="dropdown-header">筛选方式</div>
                        <div class="dropdown-options">
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="damage" checked>
                                <span>总伤害</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="dps">
                                <span>秒伤</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="instant">
                                <span>瞬时</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="healing">
                                <span>总治疗</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="hps">
                                <span>秒疗</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="taken">
                                <span>承伤</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <button id="lockBtn" class="control-btn essential lock-btn" title="锁定">
                <img src="../public/lock.png" alt="锁定" class="btn-icon">
            </button>
            <button id="settingsBtn" class="control-btn collapsible" title="设置">
                <img src="../public/setting.png" alt="设置" class="btn-icon">
            </button>
            <button id="minimizeBtn" class="control-btn collapsible" title="最小化">
                <span class="btn-icon">➖</span>
            </button>
            <button id="closeBtn" class="control-btn essential close" title="关闭">
                <span class="btn-icon">✖️</span>
            </button>
        </div>
    </div>
    
    <div id="content" class="content">
        <!-- 总览柱状图 -->
        <div id="overviewPanel" class="overview-panel">
            <div class="overview-title"></div>
            <div class="overview-bars">
                <div class="overview-row">
                    <span class="overview-label">总伤害</span>
                    <div class="overview-bar"><div class="overview-fill damage" style="width:0%"></div></div>
                    <span class="overview-value" id="overviewDamage">0</span>
                </div>
                    <div class="overview-row">
                        <span class="overview-label">总治疗</span>
                        <div class="overview-bar"><div class="overview-fill healing" style="width:0%"></div></div>
                        <span class="overview-value" id="overviewHealing">0</span>
                    </div>
                    <div class="overview-row">
                        <span class="overview-label">总承伤</span>
                        <div class="overview-bar"><div class="overview-fill taken" style="width:0%"></div></div>
                        <span class="overview-value" id="overviewTaken">0</span>
                    </div>
            </div>
        </div>
        
        <div id="mainView" class="main-view">
            <!-- 重新连接按钮 - 只在连接错误时显示 -->
            <div id="connectionStatus" class="connection-status" style="display: none;">
                <button id="reconnectBtn" class="reconnect-btn">重新连接</button>
            </div>
            
            <div id="damageList" class="damage-list">
                <div class="loading"> 连接服务器中...</div>
            </div>
        </div>
        
        <div id="skillView" class="skill-view hidden">
            <div class="skill-header">
                <button id="backBtn" class="back-btn">← 返回</button>

            </div>
            <div id="skillDetailsList" class="skill-details-list">
                <!-- 技能详细信息 -->
            </div>
        </div>
        
        <!-- 昵称编辑弹窗 -->
        <div id="nicknameEditModal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3> 设置玩家昵称</h3>
                    <button id="closeNicknameModal" class="close-modal">✖️</button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <label for="nicknameInput">玩家昵称:</label>
                        <input type="text" id="nicknameInput" placeholder="输入自定义昵称" maxlength="20">
                    </div>
                    <div class="player-uid-info">
                        <span>玩家ID: </span>
                        <span id="editingPlayerUid">-</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveNicknameBtn" class="save-btn"> 保存</button>
                    <button id="cancelNicknameBtn" class="cancel-btn"> 取消</button>
                </div>
            </div>
        </div>
        
        <!-- 昵称管理弹窗 -->
        <div id="nicknameManagerModal" class="modal hidden">
            <div class="modal-content nickname-manager">
                <div class="modal-header">
                    <h3> 昵称管理</h3>
                    <button id="closeNicknameManager" class="close-modal">✖️</button>
                </div>
                <div class="modal-body">
                    <div class="nickname-search">
                        <input type="text" id="nicknameSearch" placeholder="🔍 搜索玩家ID或昵称...">
                    </div>
                    <div class="nickname-list-container">
                        <div id="nicknamesList" class="nicknames-list">
                            <div class="loading">🔄 加载昵称数据中...</div>
                        </div>
                    </div>
                    <div class="nickname-actions">
                        <button id="addNicknameBtn" class="add-btn">添加新昵称</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 设置面板 -->
    <div id="settingsPanel" class="settings-panel hidden">
        <div class="settings-header">
            <h3>⚙️ 设置</h3>
            <button id="closeSettings" class="close-settings">✖️</button>
        </div>
        
        <div class="settings-content">
            <div class="setting-group">
                <label style="min-width: 80px;">伤害总体大小:</label>
                <label><input type="radio" name="damageSize" value="small"> 小</label>
                <label><input type="radio" name="damageSize" value="medium" checked> 中</label>
                <label><input type="radio" name="damageSize" value="large"> 大</label>
            </div>
            <div class="setting-group">
                <label for="opacitySlider">透明度:</label>
                <input type="range" id="opacitySlider" min="0.6" max="1" step="0.05" value="0.9">
                <span id="opacityValue">90%</span>
            </div>
            
            <div class="setting-group">
                <label for="widthInput">宽度:</label>
                <input type="number" id="widthInput" min="300" max="800" value="400">
                <span>px</span>
            </div>
            
            <div class="setting-group">
                <label for="heightInput">高度:</label>
                <input type="number" id="heightInput" min="200" max="1000" value="600">
                <span>px</span>
            </div>
            
            <div class="setting-group">
                <label for="alwaysOnTopCheck">置顶显示:</label>
                <input type="checkbox" id="alwaysOnTopCheck" checked>
            </div>
            
            <div class="setting-group">
                <label for="refreshInterval">刷新间隔:</label>
                <select id="refreshInterval">
                    <option value="1000">1秒</option>
                    <option value="2000" selected>2秒</option>
                    <option value="3000">3秒</option>
                    <option value="5000">5秒</option>
                </select>
            </div>
            
            <div class="setting-group">
                <label for="combatTimeoutEnabled">自动脱战:</label>
                <input type="checkbox" id="combatTimeoutEnabled" checked>
                <span>启用</span>
            </div>
            
            <div class="setting-group" id="combatTimeoutSettings">
                <label for="combatTimeout">自动脱战时间:</label>
                <select id="combatTimeout">
                    <option value="5000">5秒</option>
                    <option value="10000" selected>10秒</option>
                    <option value="15000">15秒</option>
                    <option value="30000">30秒</option>
                </select>
            </div>
            <div class="setting-group">
                <label style="font-weight: bold; color: var(--theme-color);">快捷键:</label>
                <div class="shortcut-info">
                    <div class="shortcut-item">
                        <span class="shortcut-key" id="lockShortcutDisplay">F8</span>
                        <span class="shortcut-desc">锁定/解锁窗口</span>
                        <button id="changeLockShortcut" class="change-shortcut-btn">修改</button>
                    </div>
                    <div class="shortcut-item">
                        <span class="shortcut-key">Shift+Ctrl+R</span>
                        <span class="shortcut-desc">清空战斗数据</span>
                    </div>
                </div>
            </div>
            
            <!-- 自定义快捷键设置面板 -->
            <div id="customShortcutPanel" class="custom-shortcut-panel hidden">
                <div class="shortcut-panel-header">
                    <h4>自定义快捷键</h4>
                    <button id="closeShortcutPanel" class="close-shortcut-panel">✖️</button>
                </div>
                <div class="shortcut-panel-content">
                    <div class="shortcut-input-group">
                        <label>锁定/解锁快捷键:</label>
                        <div class="shortcut-input-container">
                            <input type="text" id="lockShortcutInput" placeholder="点击输入快捷键" readonly>
                            <button id="resetLockShortcut" class="reset-shortcut-btn">重置为F8</button>
                        </div>
                        <div class="shortcut-hint">点击输入框，然后按下您想要的快捷键（不支持组合式快捷键</div>
                    </div>
                </div>
            </div>
            <div class="setting-group">
                <button id="resetPosition" class="reset-btn"> 重置位置</button>
            </div>
       
            
            <div class="setting-group">
                                    <button id="manageNicknames" class="manage-btn"> 管理昵称</button>
            </div>
            
            <!-- 移除历史记录按钮 -->

                <div class="setting-group">
                    <label style="min-width: 80px;">显示模式:</label>
                    <label><input type="checkbox" id="showDamageDropdown" checked> 显示伤害(右侧)</label>
                    <label><input type="checkbox" id="showHealingDropdown"> 显示治疗</label>
                    <label><input type="checkbox" id="showTakenDropdown"> 显示承伤</label>
                    <label><input type="checkbox" id="showProfessionDropdown" checked> 显示职业</label>
                </div>

                            <div class="setting-group">
                <label style="min-width: 80px;">显示区域:</label>
                <label><input type="checkbox" id="showCritRate"> 总暴击率</label>
                <label><input type="checkbox" id="showInstantHeal"> 瞬疗</label>
                <label><input type="checkbox" id="showInstantDps"> 瞬D</label>
            </div>
            
            <!-- 网卡配置设置 -->
            <div class="setting-group network-group">
                <label style="min-width: 80px; font-weight: bold; color: var(--theme-color);">网卡配置:</label>
                <div class="network-device-info">
                    <div class="current-device">
                        <span class="device-label">当前网卡:</span>
                        <span id="currentDeviceInfo" class="device-info">加载中...</span>
                    </div>
                    <div class="device-selection">
                        <label for="networkDeviceSelect">选择网卡:</label>
                        <select id="networkDeviceSelect" disabled>
                            <option value="">加载网卡列表中...</option>
                        </select>
                        <button id="confirmDeviceBtn" class="refresh-devices-btn" disabled>确认切换</button>
                    </div>
                    <div class="device-status">
                        <span id="deviceStatus" class="status-text">状态: 未知</span>
                    </div>
                </div>
            </div>

                <div class="setting-group">
                    <label style="min-width: 80px;">汇总显示:</label>
                    <label><input type="checkbox" id="showSummaryDamage" checked> 总伤害</label>
                    <label><input type="checkbox" id="showSummaryHealing" checked> 总治疗</label>
                    <label><input type="checkbox" id="showSummaryTaken"> 总承伤</label>
                </div>

            <div class="setting-group">
                <label for="fontSizeInput">字体大小:</label>
                <input type="number" id="fontSizeInput" min="10" max="20" value="12">
                <span>px</span>
            </div>

            <div class="setting-group">
                <label for="themeColorInput">主题颜色:</label>
                <input type="color" id="themeColorInput" value="#e7ae97">
            </div>

            <div class="setting-group">
                <label for="compactModeCheck">紧凑模式:</label>
                <input type="checkbox" id="compactModeCheck">
            </div>

            <div class="setting-group">
                <label>主题:</label>
                <label><input type="radio" name="themeMode" value="dark" checked> 深色</label>
                <label><input type="radio" name="themeMode" value="light"> 浅色</label>
            </div>
            
    
        </div>
    </div>
    
    <!-- 计时器面板 -->
    <div id="timerPanel" class="timer-panel hidden">
        <div class="timer-header">
            <h3>计时器</h3>
            <button id="closeTimer" class="close-timer">✖️</button>
        </div>
        
        <div class="timer-content">
            <div id="timerStatus" class="timer-status">
                <div class="timer-display">
                    <span id="timerText">00:00</span>
                </div>
                <div class="timer-mode" id="timerMode">就绪</div>
            </div>
            
            <div class="timer-controls">
                <div class="timer-presets">
                    <h4>快速设置:</h4>
                    <button class="timer-preset" data-time="60">60秒</button>
                    <button class="timer-preset" data-time="90">90秒</button>
                    <button class="timer-preset" data-time="180">180秒</button>
                </div>
                
                <div class="timer-custom">
                    <h4>自定义时间:</h4>
                    <input type="number" id="customTime" min="10" max="600" value="60" placeholder="秒">
                    <button id="customStartBtn">开始</button>
                </div>
                
                <div class="timer-actions">
                    <button id="startTimerBtn" class="timer-btn start" disabled>开始计时</button>
                    <button id="stopTimerBtn" class="timer-btn stop" disabled>停止计时</button>
                    <button id="resetTimerBtn" class="timer-btn reset">重置数据</button>
                    <button id="exitTimerBtn" class="timer-btn exit">退出计时模式</button>
                </div>
            </div>
            
            <div class="timer-info">
                <div class="info-item">
                    <span class="info-label">计时状态:</span>
                    <span id="timerStatusText" class="info-value">未开始</span>
                </div>
                <div class="info-item">
                    <span class="info-label">抓包状态:</span>
                    <span id="captureStatusText" class="info-value">正常</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 历史战斗记录窗口 -->
    <div id="historyModal" class="modal hidden">
        <div class="modal-content history-modal">
            <div class="modal-header">
                <h3>历史战斗记录</h3>
                <button id="closeHistory" class="close-btn">✖️</button>
            </div>
            <div class="modal-body">
                <div class="history-controls">
                    <button id="refreshHistory" class="refresh-btn">刷新</button>
                    <button id="clearAllHistory" class="clear-btn"> 清空全部</button>
                </div>
                <div id="historyList" class="history-list">
                    <div class="loading"> 暂无历史记录</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 历史记录详情窗口 -->
    <div id="historyDetailModal" class="modal hidden">
        <div class="modal-content history-detail-modal">
            <div class="modal-header">
                <h3 id="historyDetailTitle">战斗详情</h3>
                <button id="closeHistoryDetail" class="close-btn">✖️</button>
            </div>
            <div class="modal-body">
                <div id="historyDetailContent" class="history-detail-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知系统 -->
    <div id="notificationSystem" class="notification-system">
        <!-- 通知会动态插入到这里 -->
    </div>
    
    <script src="renderer_simple.js"></script>
</body>
</html>
